<template>
  <div class="g-body">
    <div class="m-header">
      <div class="m-title">播放反馈</div>
      <div class="m-tab f-flex f-between g-w">
        <div
          class="u-button f-flex f-center g-w g-r"
          :class="{ choicecolor: choiceid == item.id }"
          v-for="item in contentList"
          :key="item.id"
          @click="fnContentChoice(item)"
        >
          {{ item.content }}
        </div>
        <div class="u-button f-flex f-center g-w g-r" :class="{ choicecolor: choiceid == -2 }" @click="other">
          其他问题或建议
        </div>
      </div>
    </div>
    <div class="m-iptbox" v-show="choiceid == -2">
      <input class="u-input s-background g-w" v-model="contentvalue" placeholder="问题描述" />
    </div>
    <div class="m-commitbox">
      <div class="u-commit g-r" :class="{ choicecolor: choiceid != -1 }" @click="fnCommit">提交</div>
    </div>
    <div class="m-division"></div>
    <div class="m-bottom">
      <van-button @click="fnCancel" type="default" class="u-button2 s-background g-w">取消</van-button>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { reactive, toRefs } from '@vue/reactivity'
export default {
  name: 'contentFeedback',
  props: ['contentList'],
  setup(props, { emit }) {
    let state = reactive({
      choiceid: -1,
      contentvalue: ''
    })
    function fnCancel() {
      emit('cancelEvent')
    }
    //返回播放反馈选择信息
    function fnContentChoice(item) {
      if (state.choiceid == item.id) {
        state.choiceid = -1
        return
      }
      state.choiceid = item.id
    }

    function other() {
      if (state.choiceid == -2) {
        state.choiceid = -1
      } else {
        state.choiceid = -2
      }
    }

    function fnCommit(item) {
      if (state.choiceid == -1) {
        Toast('请选择反馈内容')
        return
      } else if (state.choiceid == -2 && state.contentvalue.length < 2) {
        Toast('其他原因至少填写2个字')
        return
      }
      if (state.choiceid == -2) {
        emit('contentCommit', { content: '其他问题或建议', reason: state.contentvalue })
      } else {
        props.contentList.forEach((i) => {
          if (i.id == state.choiceid) {
            emit('contentCommit', i)
            return
          }
        })
      }
      state.choiceid = -1
      state.contentvalue = ''
    }

    return { fnCancel, fnContentChoice, ...toRefs(state), other, fnCommit }
  }
}
</script>

<style lang="scss" scoped>
.g-r{
    border-radius: 3px;
}
.g-w {
  width: 100%;
}
.s-background {
  background: #121212;
}
.choicecolor {
  background: #D74F81;
  border:1px solid #D74F81 !important;
}
.f-flex {
  display: flex;
  flex-wrap: wrap;
}
.f-between {
  justify-content: space-between;
}
.f-center {
  justify-content: center;
  align-content: center;
}
.g-body {
  // color: #333333;
  padding-top: 20px;
  .m-commitbox {
    padding: 10px;
    .u-commit {
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #747880;
    }
  }
  .m-iptbox {
    padding: 0 20px;
    .u-input {
      height: 20px;
      line-height: 20px;
      color: #747880;
      border: none;
      border-bottom: 1px solid #D74F81;
      margin-bottom: 10px;
    }
  }
  .m-header {
    color: #e7e8ea;
    padding: 0 20px 0 20px;
    .m-title {
      margin-bottom: 10px;
      font-size: 14px;
      .f-small {
        font-size: 12px;
        color: #747880;
      }
    }
    .m-tab {
      .u-button {
        width: 45%;
        margin-bottom: 10px;
        height: 30px;
        border: 1px solid #747880;
        color: #e7e8ea;
        font-size: 12px;
      }
    }
  }
  .m-division {
    height: 8px;
    background: #020003;
  }
  .m-bottom {
    .u-button2 {
      height: 50px;
      border: none;
      color: #e7e8ea;
    }
  }
}
</style>
